<template>
  <div>
    <!-- 左对齐 -->
    <div class="userheader">
      <van-icon v-show="badgeNumber!==0" name="chat-o" :badge="badgeNumber" class="message" @click="$router.push('messagelist')"/>
      <van-icon v-show="badgeNumber==0" name="chat-o"  class="message" @click="$router.push('messagelist')"/>
      <van-row type="flex">
        <van-col span="24">
          <div style="display: flex;justify-content: left;">
            <van-image round width="5rem" height="5rem" :src="userinfo.headimgurl"/>
            <div style="display: flex;justify-content: left;flex-direction: column;margin-left:1rem">
              <p>{{userinfo.nickname}}</p>
              <p>四川九零后智慧洗车服务有限公司</p>
              <van-image width="1rem" height="1rem" :src="userinfo.headimgurl"/>
            </div>
          </div>
        </van-col>
      </van-row>
    </div>
    <div class="van-hairline--bottom">
      <van-grid :column-num="4">
        <van-grid-item to="/CoinSpraylist">
          <div style="text-align:center;">
            <div>
              <van-image width="3rem" height="3rem" :src="gridImg.icon3"/>
            </div>
            <p>预约钣喷:{{car_num.lacqueredNum}}</p>
          </div>
        </van-grid-item>
        <van-grid-item to="/maintenancelist">
          <div style="text-align:center;">
            <div>
              <van-image width="3rem" height="3rem" :src="gridImg.icon1"/>
            </div>
            <p>预约维修:{{car_num.maintenanceNum}}</p>
          </div>
        </van-grid-item>
        <van-grid-item to="/maintainlist">
          <div style="text-align:center;">
            <div>
              <van-image width="3rem" height="3rem" :src="gridImg.icon2"/>
            </div>
            <p>预约养护:{{car_num.preserveNum}}</p>
          </div>
        </van-grid-item>
        <van-grid-item @click="toSafe">
          <div style="text-align:center;">
            <div>
              <van-image width="3rem" height="3rem" :src="gridImg.icon4"/>
            </div>
            <p>预约保险:{{car_num.preserveNum}}</p>
          </div>
        </van-grid-item>
      </van-grid>
    </div>
    <van-cell-group>
      <van-cell title="我的卡券" @click="$router.push('couponlist')" is-link/>
    </van-cell-group>
    <van-cell-group>
      <van-cell title="车辆管理" @click="$router.push('carlist')" is-link/>
    </van-cell-group>
    <van-cell-group>
      <van-cell title="我的代办"  is-link/>
    </van-cell-group>
    <van-cell-group>
      <van-cell title="我的车品" @click="$router.push('carshoplist')" is-link/>
    </van-cell-group>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        showDialog:false,
        gridImg: {
          icon1: require("../assets/img/icon (1).png"),
          icon2: require("../assets/img/icon (2).png"),
          icon3: require("../assets/img/icon (3).png"),
          icon4: require("../assets/img/icon(4).png")
        },
        car_num: {
          lacqueredNum: "0",
          maintenanceNum: "0",
          preserveNum: "0"
        },
        userinfo: {
          nickname: "九零后有志青年",
          headimgurl: ""
        },

        oepnId: "",
      };
    },
    methods: {
      toSafe() {
        this.$router.push('/addcard')
        // this.$dialog.confirm({
        //   title: "提示",
        //   message: "需要电话认证后，才能预约，是否立即认证",
        // }).then(()=> {
        //   this.$router.push('/telephoneAuthorize')
        // }).catch(() => {
        //   console.log("点击了取消按钮噢")
        // })
      },
      getUrlParam(name) {
        let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); // 构造一个含有目标参数的正则表达式对象
        let r = window.location.search.substr(1).match(reg); // 匹配目标参数
        if (r != null) return decodeURIComponent(r[2]);
        return null; // 返回参数值
      },
      getopenID() {
        let code = this.$route.query.code || this.getUrlParam("code");
        // var state = this.$route.query.state || this.getUrlParam('state')
        var redirectUri = escape(window.location.href + "?state=true");
        var APPID = "wxd5c04a0b457efd8f";
        if (code) {
          var params = {
            code: code
          };
          this.axios
            .get("/api/index/get_openid", {params: params})
            .then(res => {
              var data = res.data;
              localStorage.setItem("userinfo", JSON.stringify(res.data));
              this.oepnId = res.data.data.openid;
              console.log(data);
            })
            .catch(err => {
              console.error(err);
            });
        } else {
          var wxopenidurl =
            "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
            APPID +
            "&redirect_uri=" +
            redirectUri +
            "&response_type=code&scope=snsapi_userinfo&state=true#wechat_redirect";
          window.location.href = wxopenidurl;
        }
      },
      getcarmenu() {
        var openId = "null";
        var params = {
          openId: this.oepnId
        };
        this.axios
          .post("/personal/car_num")
          .then(res => {
            console.log(res);
            this.car_num = res.data.data.list[0];
            console.log(this.car_num);
          })
          .catch(err => {
            console.error(err);
          });
      }
    },
    mounted() {
      var userinfo = JSON.parse(localStorage.getItem("userinfo"));
      if (userinfo == null) {
        this.getopenID();
      } else {
        this.oepnId = userinfo.openid;
        console.log(userinfo);
      }
      this.getcarmenu();
    },
    computed: {
      badgeNumber() {
        return this.$store.state.messageNumber
      }
    }
  };
</script>
<style scoped>
  .message {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 1.5rem;
    color: #eeeeee;
  }
  .userheader {
    padding: 15px;
    background: #ffffff;
    background: url("http://img0.imgtn.bdimg.com/it/u=3209478221,3791663447&fm=26&gp=0.jpg");
    height: 167px;
    display: flex;
    justify-content: left;
    align-items: center;
  }

  .userheader .van-row--flex {
    justify-content: center;
    align-items: center;
  }

  .userheader p {
    color: #fff;
    font-size: 15px;
    line-height: 30px;
  }
</style>
